<template>
    <div class="login">
        <h1>Welcome to Share Photos</h1>

        <div class="loginInfo">
            <va-input v-model="userName" placeholder="请输入账号">
                <template #prependInner>
                <va-icon name="add_to_home_screen"/>
                </template>
            </va-input>
            <va-input v-model="password" placeholder="请输入密码" type="password">
                <template #prependInner>
                    <va-icon name="admin_panel_settings"/>
                </template>
            </va-input>
            <va-button :rounded="false" color="black" text-color="white" @click="goHome">Login</va-button>
        </div>
    </div>
</template>

<script>
import {ref} from 'vue'
import {useRouter} from 'vue-router'
export default{
    setup(){
        const userName=ref('zhiyu');
        const password=ref('06223822');
        const router=useRouter();
        const goHome=()=>{
            router.push({
                path:'/home'
            })
        }
        return {userName,password,goHome};
    }
}
</script>

<style scoped>
.login{
    width: 375px;
    height: 667px;
}
h1{
    position: absolute;
    left:40px;
    top: 140px;
    font-size: 24px;
}
.va-icon{
    padding: 10px 0;
}
.va-input{
    width: 315px;
    padding:12px 0;
}
.loginInfo{
    position: absolute;
    left:30px;
    top: 250px;
    animation: backInUp;
    animation-duration: 1.5s;
}
.va-button{
    width: 200px;
    height: 40px;
    margin-top: 50px;
    margin-left: 58px;
}
</style>